<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">评价管理</div>
                    <div class="leave_right choose_right_input">
                        <!--<el-dropdown trigger="click" @command="handleCommand">-->
                            <!--<span class="el-dropdown-link">-->
                            <!--综合评价星级选择<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                            <!--</span>-->
                            <!--<el-dropdown-menu slot="dropdown">-->
                                <!--<el-dropdown-item v-for="item in evalateLeaveList" :key="item.value" :command="item">{{item.label}}</el-dropdown-item>-->
                            <!--</el-dropdown-menu>-->
                        <!--</el-dropdown>-->
                        <label class="label_style_slect">企业等级筛选</label>
                        <el-select v-model="form.star" class="leave_select_right" placeholder="请选择" @change="handleCommand">
                            <el-option
                                    v-for="item in evalateLeaveList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <div>
                            <el-input type="text" placeholder="请输入企业名称" v-model="form.keyWord" clearable @clear="chooseEvaluate()"></el-input><el-button type="primary" size="small" @click="chooseEvaluate()">搜索</el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="star" label="综合被评价星级"> </el-table-column>
            <el-table-column prop="enterpriseName" label="企业名称"> </el-table-column>
            <el-table-column prop="customerName" label="联系人"> </el-table-column>
            <el-table-column prop="phoneNumber" label="联系电话"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="evaluateDetail(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogContent ref="evaluteDetailDialog" title="企业评价详情" @close="closeEvalateDialog()">
            <div class="rem-dialog-con">
                <el-row>
                    <el-form label-width="140px" size="small">
                        <el-col :span="12" class="text_left">
                            <el-form-item label="企业名称：">
                                <span>{{evaluateDetailForm.enterpriseName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left star_content">
                            <el-form-item label="综合被评价星级：">
                                <!--<span>{{evaluateDetailForm.star}}星</span>-->
                                <el-rate
                                        v-if="evaluateDetailForm.star != null"
                                        v-model="evaluateDetailForm.star"
                                        disabled
                                        show-score
                                        text-color="#ff9900"
                                        score-template="{value}">
                                </el-rate>
                                {{evaluateDetailForm.star != null ? '星':'--'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="联系人：">
                                <span>{{evaluateDetailForm.customerName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="联系方式：">
                                <span>{{evaluateDetailForm.phoneNumber}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-tabs v-model="form.isReceive" @tab-click="handleClick" stretch class="tab_check_bill">
                                <el-tab-pane name="0">
                                    <span slot="label">已收到的评价</span>
                                </el-tab-pane>
                                <el-tab-pane name="1">
                                    <span slot="label">已作出的评价</span>
                                </el-tab-pane>
                            </el-tabs>
                            <el-table :data="evalateList" stripe style="width: 100%">
                                <el-table-column prop="enterpriseName" label="评价企业"> </el-table-column>
                                <el-table-column prop="orderNo" label="订单号"> </el-table-column>
                                <el-table-column prop="star" label="评价星级"> </el-table-column>
                                <el-table-column prop="description" label="评价详情"> </el-table-column>
                            </el-table>
                            <div class="right clear">
                                <el-pagination
                                        @size-change="onSizeChange"
                                        @current-change="onFlipOver"
                                        :current-page="pagination.currentPage"
                                        :page-sizes="pagination.pageSizes"
                                        :page-size="pagination.pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="pagination.total">
                                </el-pagination>
                            </div>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
        </DialogContent>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogContent from '@component/common/DialogContent.vue';
    import { evalateLeaveTypes } from '@/util/constantStatus'
    @Component({
        extends: Pagination,
        components: {
            DialogContent
        }
    })
    export default class EvaluateManage extends Vue {
        form = {
            keyWord: '',
            isReceive: '0',
            enterpriseId: '',
            star: ''
        }
        tableData = []
        evaluateDetailForm: any = {}
        evalateList = []
        evalateLeaveList = evalateLeaveTypes

        // 查询所有评价列表
        async getEvaluateList () {
            let params = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                enterpriseName: this.form.keyWord,
                star: this.form.star
            }
            let res = await this.$http.post('appraisal/list', params)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                items.forEach((i) => {
                    if (i.star == null) {
                        i.star = '--'
                    }
                })
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }

        chooseEvaluate () {
            this.getEvaluateList();
        }
        handleCommand (item) {
            this.form.star = item.value;
            this.getEvaluateList();
        }
        evaluateDetail (item) {
            this.form.isReceive = '0'
            this.form.enterpriseId = item.id;
            this.evaluateDetailForm = item;
            this.$refs['evaluteDetailDialog'].openDialog();
            this.getEnterEvaluteList();
        }
        handleClick () {
            if (this.form.isReceive == '0') {
                this.getEnterEvaluteList()
            }else {
                this.getEnterIssueEvaList()
            }
        }
        // 查询收到的评价
        async getEnterEvaluteList () {
            let params = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                enterpriseId: this.form.enterpriseId
            }
            let res = await this.$http.post('appraisal/beAppraised', params)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                this.evalateList = items;
                this.pagination.total = totalNum;
            }
        }
        // 查询企业做出的评价
        async getEnterIssueEvaList () {
            let params = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                enterpriseId: this.form.enterpriseId
            }
            let res = await this.$http.post('appraisal/appraisal', params)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                this.evalateList = items;
                this.pagination.total = totalNum;
            }
        }
        closeEvalateDialog () {
            this.getEvaluateList();
        }
        loadDataForPagination() {
            this.getEvaluateList()
        }
        mounted () {
            this.getEvaluateList()
        }
    }
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
    .star_content {
        .el-form-item__content {
            display: flex;
            align-items: center;
        }
    }
</style>